<template>
  <a-modal :maskClosable="false" :width="1000" v-model:visible="modalVisible" title="编辑" @ok="handleOk" :closable="false">
    <div class="tableStyle">
      <a-table
        :columns="columns"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :data-source="list"
        bordered
        :pagination="false"
      >
        <template #fieldType="{ record }">
          <span>{{ type[record.fieldType] }}</span>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
import { columnsArr, dataObj, statusColorObj, typeObj } from '../data'
import { useTable } from '@/hooks'
import { addressBookList, deleteAddressBook } from '@/api/setting/index'
import { selectOrganFieldByOrganId, placeOrganFieldBind } from '@/api/content/translate'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
//
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      default: null
    }
  },
  setup(props, { emit, attrs }) {
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })
    const data = reactive(dataObj)

    const columns = columnsArr
    const type = typeObj
    const route = useRoute()

    //必须有括号 建议箭头函数 防止深拷贝

    watch(
      () => props.visible,
      (newVal, oldVal) => {
        console.log('Number changed from', oldVal, 'to', newVal)
        if (props.visible) initData() // 调用 detail 方法
      }
    )

    const initData = async () => {
      // 列表
      data.selectedRowKeys = []
      selectOrganFieldByOrganId({ serviceId: props.id }).then(r => {
        data.list = r.object
        r.object.forEach(item => {
          if (item.isChoice == 1) {
            if (!data.selectedRowKeys.includes(item.id)) {
              // 如果不包含，则推送 item.id 到数组中
              data.selectedRowKeys.push(item.id)
            }
          }
        })
        console.log('selectedRowKeys', data.selectedRowKeys)
      })
    }

    const cancle = () => {
      emit('update:visible', false)
      emit('closeModal')
    }

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys 1: ', selectedRowKeys)
      data.selectedRowKeys = selectedRowKeys
      console.log('selectedRowKeys 2: ', data.selectedRowKeys)
    }

    const handleOk = () => {
      console.log(data.selectedRowKeys)
      if (data.selectedRowKeys.length < 1) return message.warning('请选择配置项')
      let arr = ['2', '3', '4', '1', '5']
      let status = arr.every(item => data.selectedRowKeys.includes(item))
      if (!status) return message.warning('请选择前五项')
      let form = {
        fieldIdList: [...new Set(data.selectedRowKeys)], // 本来是不需要做这步的 后端说做去重麻烦
        serviceId: props.id
      }
      placeOrganFieldBind(form).then(res => {
        cancle()
      })
    }

    return {
      modalVisible,
      ...toRefs(data),
      columns,
      onSelectChange,
      type,
      handleOk
    }
  }
}
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
.tableStyle {
  height: 70vh;
  overflow-y: scroll;
}
</style>
